{% extends 'sidebar.html' %}
{% load static %}
{% load sizeformat %}
{% load i18n %}

{% block head %}
    <style>
        .text-overflow-hide {
            width: 50%;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
{% endblock %}
{% block title %}{% trans '首页' %}{% endblock %}

{% block content %}
    <div class="bg-light">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                {% if active_service %}
                    <a class="nav-link" href="{% url 'servers:server-list' %}?service={{ active_service }}">云服务器</a>
                {% else %}
                    <a class="nav-link" href="{% url 'servers:server-list' %}">云服务器</a>
                {% endif %}
            </li>
            <li class="nav-item">
                {% if is_need_vpn %}
                    <a class="nav-link" href="{% url 'vpn:service-vpn' active_service %}">VPN</a>
                {% else %}
                    <a class="nav-link disabled" href="#">VPN</a>
                {% endif %}
            </li>
        </ul>
    </div>
    <div class="mt-2">
        <div>
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
                <div class="col mb-2 mt-2">
                    <div class="card text-dark h-100">
                        <div class="card-body">
                            <div><p class="text-center">{% trans '云服务器' %} <i class="fa fa-desktop"></i> <span class="badge badge-primary badge-pill">{{ private_server_count|add:shared_server_count }}</span></p></div>
                            <canvas id="id-chart-quota-server"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block sidebar-script %}
    <script type="text/javascript" src="{% static 'chartjs/Chart-2.9.3.min.js' %}"></script>
    <script>
        let data_server = [{{ shared_server_count }}, {{ private_server_count }}];
        {% verbatim script %}
        window.chartColors = {
            red: 'rgb(255, 99, 132)',
            orange: 'rgb(255, 159, 64)',
            yellow: 'rgb(255, 205, 86)',
            green: 'rgb(80,192,83)',
            blue: 'rgb(54, 162, 235)',
            purple: 'rgb(153, 102, 255)',
            grey: 'rgb(201, 203, 207)'
        };
        function create_chart(ctx, type, data, options){
            return new Chart(ctx, {
                type: type,
                data: data,
                options: options
            })
        }

        //@title: title.text
        //@data: datasets.data
        function create_chart_pie(ctx, title, data){
            let title_display = false;
            if (title){
                title_display = true;
            }
            return create_chart(ctx, 'pie', {
                labels: ['已用', '可用'],
                datasets: [{
                    data: data,
                    backgroundColor: [
						window.chartColors.grey,
						window.chartColors.green
					],
                    borderWidth: 2
                }]
            }, {
                title: {
                    display: title_display,
                    text: title
                },
                legend: {
                    position: 'right'
                }
            })
        }

        let canvas_server = document.getElementById('id-chart-quota-server').getContext('2d');
        window.chart_server = create_chart(canvas_server, 'doughnut', {
                labels: ["共享已建", "私有已建"],
                datasets: [{
                    data: data_server,
                    backgroundColor: [
						window.chartColors.blue,
                        window.chartColors.orange
					],
                    borderWidth: 2
                }]
            }, {
                legend: {
                    position: 'right'
                },
                cutoutPercentage:60,
                circumference: Math.PI,
                rotation:Math.PI
            });
        {% endverbatim script %}
    </script>
{% endblock %}
